<template>
    
    <h3>vue-router路由跳转/路由鉴权</h3>
    <router-link :to="{name:'Login'}" class="login link" active-class="active-link">jump login</router-link>
    <router-link :to="{name:'Reg'}" class="reg link" active-class="active-link">jump Reg</router-link>  
    <router-link :to="{name:'Index'}" class="index link" active-class="active-link">jump Index</router-link>
    <router-link :to="{name:'Test'}" class="index link" active-class="active-link">jump Test</router-link>
    <h3>测试keep-alive功能</h3>

    <router-link :to="{name:'productDetail',params:{id:9999}}" class="index link" active-class="active-link">jump productDetail-faker</router-link>
</template>

<script lang="ts">

import { RouterLink } from 'vue-router'
//ref简单 
//composition API 可以和option api混合使用

//minxin不清晰，而且会有命名冲突问题
export default { 
  components: {
    RouterLink
  },
  setup(){
    
  },
  onMounted(){
    return function (){
    }
  }
}
</script>
<!-- <script>
export default {
  name:"Nav",
}
</script> -->
<style lang="less" scoped>
.link{
 display:inline-block;
 background:#e54d42;
 border-radius: 20px;
 padding: 20px;
 margin-right: 20px;
 width: 200px;
 color: #fff;
 cursor: pointer;
 text-decoration: none;
}
.active-link{
  color: yellowgreen;
}
</style>
